<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片廊作业</title>
	<style>
		   *{margin:0;padding:0;list-style-type:none;}
		html{
			height:100%;
		}
		body{
			background-color: #ccc;
			height:100%;
		}
		.container{
			width: 1180px;
			margin:0 auto;
			height:100%;
			background-color: #eaeaea;
		}
		h1{
			text-align: center;
			font-weight: 200;
			color:pink;
		}
		.pic_wrap{
			width: 900px;
			margin:20px auto 0;
		}
		.pic_wrap img{
			width: 200px;
			height: 250px;
		}
		.pic_wrap .box{
			float:left;
			border:5px solid #fff;
			margin-left:20px;
			background-color: #fff;
		}
		.pic_wrap .box:hover{
			margin-top:-5px;
			box-shadow: 0 5px 20px #aaa;
		}
		.pic_wrap .box:first-child{
			margin-left:0px;
		}	
	</style>
</head>
<body>
	  <div class="container">
	  	    <h1>图片廊</h1>
	  	    <div class="pic_wrap">
	  	      <div class="box">
	  	      	<img src="./mao.jpg">
	  	      </div>
	  	      <div class="box">
	  	      	<img src="./mao.jpg">
	  	      </div>
	  	      <div class="box">
	  	      	<img src="./mao.jpg">
	  	      </div>
	  	      <div class="box">
	  	      	<img src="./mao.jpg">
            </div>
        </div>
	  </div>
</body>
</html>